import { useState, useEffect } from "react";
import MyHeader from "../myHeader";
import ContentItem from "../contentItem";
import WatchFun from "../../components/watchFun";
import UpdataFun from "../../components/updataFun";

import { utilsTime } from "../../tool"
// import BScroll from 'better-scroll'

import {
  addNote,
  delNote,
  putNote,
  getNotes
} from "../../api"

export default function Home() {
  const [isInput, setIsInput] = useState(false);

  const [todolist, setTodolist] = useState([]);
  const [watchIsShow, setwatchIsShow] = useState(false);
  const [info, setInfo] = useState({});
  const [updataIsShow, setUpdataIsShow] = useState(false);
  let searchVal = ""

  useEffect(() => {
    getNotesAll()
  }, []);

  // 獲取全部的notes
  const getNotesAll = async () => {
    let data = await getNotes();
    if (data.code - 0 === 200) {
      data.data.forEach(item => {
        item.note_updata_time = utilsTime(item.note_updata_time);
      })

      data.data.sort((a, b) => {
        return b.note_updata_time - a.note_updata_time
      })

      let rightArr = []
      let leftArr = []

      data.data.forEach(item => {
        if (item.note_done) {
          rightArr.push(item)
        } else {
          leftArr.push(item)
        }
      })



      return setTodolist([...leftArr, ...rightArr])
    }


  }

  // 切换是否完成
  async function changeCompeted(_id) {

    let item = todolist.find((item) => {
      return item._id === _id
    });

    item.note_done = !item.note_done;
    await putNote(item)
    // console.log(data);
    getNotesAll()


  }

  // 保存纪要 标题 创建新纪要
  async function setInputValue(val) {


    let data = await addNote({
      note_content: val
    })
    if (data.code - 0 === 200) {
      setTodolist([data.data, ...todolist]);
    }


  }



  // 删除纪要
  async function delVal(_id) {
    let data = await delNote({
      _id
    })

    getNotesAll()
    if (data.code - 0 !== 200) {
      alert(data.msg)
    }
  }

  // 查看纪要
  function watchFunChange(_id) {
    let item = todolist.find((item) => {
      return item._id === _id

    })
    setInfo(item);
    setwatchIsShow(true);
  }

  // 关闭 查看纪要
  function watchFunChange1() {
    setwatchIsShow(false);
  }

  // 打开 编辑纪要
  function updataInfoIsShow(_id) {
    let item = todolist.find((item) => {
      return item._id === _id

    })
    setInfo(item);
    setUpdataIsShow(true);
  }

  // 关闭 编辑纪要 提交修改
  async function updataInfo(val, _id, note_done) {

    let data = await putNote({
      note_content: val,
      _id,
      note_done
    })

    if (data.code - 0 !== 200) {
      alert(data.msg || "err");
    }
    getNotesAll()
    setUpdataIsShow(false);
  }

  return (
    <div className="container">
      {updataIsShow ? (
        <UpdataFun info={info} updataInfo={updataInfo} />
      ) : (
        ""
      )}
      {watchIsShow ? (
        <WatchFun info={info} watchFunChange1={watchFunChange1} />
      ) : (
        ""
      )}

      <MyHeader
        searchVal={searchVal}
        setInputValue={setInputValue}
        setIsInput={setIsInput}
        isInput={isInput}
      />

      <ul className="contentmain">
        {todolist.map((item) => {
          return (
            <ContentItem
              updataInfoIsShow={updataInfoIsShow}
              watchFunChange={watchFunChange}
              delVal={delVal}
              changeCompeted={changeCompeted}
              data={item}
              key={item._id}
            />
          );
        })}
      </ul>

    </div>
  );
}
